<template>
  <div class="out_box">
      <div class="head">评论</div>
         <div class="addcommentarea">
          <el-input type="textarea" v-model="commentVo.content" placeholder="请留下您宝贵的评论"></el-input>
         <el-button type="primary" @click="addComment()">发布</el-button>
      </div>
      <div v-for="item in commentList" class="commentStyle">
          <Comment :commentdata='item' ></Comment>
      </div>
  </div>
</template>

<script>
import {getCommentListByBid,add} from '../api/comment/comment'
import Comment from '../components/Comment.vue'
export default {
  
    components :{
        Comment
  },
  props:['bid'],
  name: 'CommentArea',
   data() {
      return {
          bookid:'',
          commentList:[],
          commentVo:{}
    }
    },
    methods: {
         addComment(){   
    if(this.$store.getters.token == null || this.$store.getters.token == "" || this.$store.getters.token== undefined){
      this.$message.info("请先登录")
      return 
    }
             this.commentVo.bid=this.bookid
             add(this.commentVo).then((res)=>{
                 if(res.flag){
                     this.$message({
                         type: 'success',
                         message: '添加成功'
                     })
                     this.getTopComment(this.bookid)
                 }
             })
         },
         getTopComment(){
             getCommentListByBid(this.bookid).then((res)=>{
                 if(res.flag){
                     this.commentList=res.data
                 }
             })
         }
    },
    created()
    {
     this.bookid=this.bid
    this.getTopComment();
    }

}
</script>


<style  scoped>
.head
{
    width: 100%;
    height: 30px;
    background-color: gainsboro;
    text-align: left;
    padding: 5px;
    padding-left:10px;
    line-height: 30px;
    font-weight: bolder;
    color: burlywood;
}
.addcommentarea{
  display: flex;
}
.commentStyle
{
    width: 100%;
    text-align: left;
     border-bottom: 1px solid grey;
     
}
.out_box
{
    width: 1340px;
    overflow: hidden;
    margin: 0 auto;
}
</style>
